<template>
  <div class="app-container">
    <el-card>
      <el-form inline :model="searchForm">
        <el-form-item label="错误代码">
          <el-input
            v-model="searchForm.title"
            placeholder="请输入标题"
            size="small"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.enableStatus" placeholder="请选择状态" clearable size="small">
            <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="发布平台">
          <el-select v-model="searchForm.platformType" placeholder="请选择发布平台" clearable size="small">
            <el-option v-for="item in platformTypeList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="银行名称">
          <el-select v-model="searchForm.codeId" placeholder="请选择工具类型" clearable size="small">
            <el-option v-for="item in BankList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" icon="el-icon-refresh" @click="resetForm('searchForm')">重置</el-button>
          <el-button size="small" type="primary" icon="el-icon-search" @click="search()">查询</el-button></el-form-item>
      </el-form>

      <el-button icon="el-icon-plus" size="small" type="primary" @click="addErrorCode()">新增错误代码</el-button>

      <el-table :data="tableData.data" v-loading="listLoading" border style="width: 100%; margin-top: 20px">
        <el-table-column align="center" label="ID" prop="id" width="80"></el-table-column>
        <el-table-column label="银行名称" align="center" prop="bankName"></el-table-column>
        <el-table-column label="错误代码" align="center" prop="title"></el-table-column>
        <el-table-column label="平台" align="center" prop="platformType"></el-table-column>
        <el-table-column show-overflow-tooltip label="错误代码原因" align="center" prop="described"></el-table-column>
        <el-table-column show-overflow-tooltip label="错误代码解决方案" align="center" prop="content"></el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.enableStatus" :active-value="1" :inactive-value="0"
              @change="updateStatus(scope.row.id)" />
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime"></el-table-column>
        <el-table-column label="发布人" align="center">
          <template slot-scope="scope">
           <el-image style="width: 40px; height: 40px" :src="scope.row.memberIcon" fit="cover"></el-image>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="detail(scope.row.id)">查看</el-button>
            <el-button size="mini" type="text" :disabled="scope.row.enableStatus == 1" @click="editRound(scope.row.id)">编辑</el-button>
            <el-button size="mini" type="text" :disabled="scope.row.enableStatus == 1" @click="deleteRound(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="pageRight" background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]" :current-page="searchForm.pageNum" :page-size="searchForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getToolLoansList, deleteToolLoans, updateToolLoansStatus, getErrorCodeList } from "@/api/tool";
import { getDictLabel } from "@/utils/dict";
import { getBankList } from "@/api/system";
export default {
  data() {
    return {
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        title: "",
        enableStatus: "",
        platformType: "",
        toolType: "error_code",
      },
      platformTypeList: [],
      statusList: [
        { label: "启用", value: 1 },
        { label: "禁用", value: 0 },
      ],
      tableData: {
        data: [],
        total: 0,
      },
      listLoading: false,
      BankList:[]
    };
  },
  async created() {
    this.platformTypeList = await this.$getDictData("platform_type");
    this.getBankList()
    this.getList();
  },
  methods: {
    getBankList() {
      getBankList().then((res) => {
        this.BankList = res.data;
      });
    },
    updateStatus(id) {
      updateToolLoansStatus(id).then((res) => {
        this.$message({
          message: "修改成功",
          type: "success",
        });
        this.getList();
      });
    },
    detail(id) {
      this.$router.push({
        path: "/tool/errCodeAdd",
        query: {
          id: id,
          type: "detail",
        },
      });
    
    },
    editRound(id) {
      this.$router.push({
        path: "/tool/errCodeAdd",
        query: {
          id: id,
        },
      });
    },
    deleteRound(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteToolLoans(id).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getList();
          })
        })
    },
    addErrorCode() {
      this.$router.push({
        path: "/tool/errCodeAdd",
      });
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.getList();
    },
    getList() {
      // this.$emit("queryTable");
      this.listLoading = true;
      getErrorCodeList(this.searchForm)
        .then((res) => {
          res.data.list.forEach((item) => {
            item.platformType = getDictLabel(
              item.platformType,
              this.platformTypeList
            );
          });
          this.tableData.data = res.data.list;
          this.tableData.total = res.data.total;
          this.listLoading = false;
        })
        .finally(() => {
          this.listLoading = false;
        });
    },
    search() {
      this.searchForm.pageNum = 1;
      this.getList();
    },
    resetForm(form) {
      this.searchForm = {
        pageNum: 1,
        pageSize: 10,
        title: "",
        enableStatus: "",
        platformType: "",
        toolType: "error_code",
      };
      this.getList();
    },
  },
};
</script>

<style></style>
